<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:of="http://omnifaces.org/functions"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">Danh sách danh mục</ui:define>
    <ui:define name="content">
        <h:form id="mainForm">
            <p:panel header="Danh sách danh mục">
                <p:messages id="msgs"/>
                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                    <p:toolbarGroup align="left">  
                        <p:button value="Tạo mới" outcome="new"/>
                        <p:commandButton value="Xem" action="#{categoryBean.preViewAction()}" update="mainForm:viewMsgs" oncomplete="handleViewRequest(xhr, status, args)"/>
                        <p:commandButton value="Sửa" action="#{categoryBean.preEditAction()}" update="mainForm:editMsgs" oncomplete="handleEditRequest(xhr, status, args)"/>
                        <p:commandButton value="Xóa" actionListener="#{categoryBean.preDeleteAction()}" update="mainForm:deleteMsgs" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                        <p:commandButton value="Chọn danh mục/bài viết HOT" action="#{categoryBean.preSelectHotAction()}" update="mainForm:selectHotMsgs" oncomplete="handleSelectHotRequest(xhr, status, args)"/>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">  
                        <p:menuButton value="Chuyển trang">  
                            <p:menuitem value="Trang chủ" url="/home.jsf" />
                        </p:menuButton>  
                    </p:toolbarGroup>
                </p:toolbar>
                
                <p:dataTable var="category" value="#{categoryBean.categoryList}" paginator="true" rows="10"
                             paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
                             rowsPerPageTemplate="10,20,30" rowKey="#{category.id}"
                             selection="#{categoryBean.selectedCategories}">
                    <f:facet name="header">Danh sách danh mục</f:facet>
                    <p:column selectionMode="multiple" />
                    <p:column headerText="Tên danh mục">
                        <h:outputText value="#{category.name}"/>  
                    </p:column>
                    <p:column headerText="URL">
                        <h:outputText value="#{category.url}"/>  
                    </p:column>
                    <p:column headerText="Danh mục cha">
                        <h:outputText value="#{category.parent.name}" rendered="#{category.parent != null}"/>
                    </p:column>
                    <p:column headerText="Thiết bị">
                        <ui:repeat value="#{category.devices}" var="device">
                            <h:outputText value="[#{device}] "/>
                        </ui:repeat>
                    </p:column>
                    <p:column headerText="Ngày tạo">
                        <h:outputText value="#{of:formatDate(category.createdDate, 'yyyy-MM-dd HH:mm:ss')}"/>
                    </p:column>
                    <p:column headerText="Ngày cập nhật">
                        <h:outputText value="#{of:formatDate(category.modifiedDate, 'yyyy-MM-dd HH:mm:ss')}"/>
                    </p:column>
                </p:dataTable>
                
                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                    <p:toolbarGroup align="left">  
                        <p:button value="Tạo mới" outcome="new"/>
                        <p:commandButton value="Xem" action="#{categoryBean.preViewAction()}" update="mainForm:viewMsgs" oncomplete="handleViewRequest(xhr, status, args)"/>
                        <p:commandButton value="Sửa" action="#{categoryBean.preEditAction()}" update="mainForm:editMsgs" oncomplete="handleEditRequest(xhr, status, args)"/>
                        <p:commandButton value="Xóa" actionListener="#{categoryBean.preDeleteAction()}" update="mainForm:deleteMsgs" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                        <p:commandButton value="Chọn danh mục/bài viết HOT" action="#{categoryBean.preSelectHotAction()}" update="mainForm:selectHotMsgs" oncomplete="handleSelectHotRequest(xhr, status, args)"/>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">  
                        <p:menuButton value="Chuyển trang">  
                            <p:menuitem value="Trang chủ" url="/home.jsf" />
                        </p:menuButton>  
                    </p:toolbarGroup>
                </p:toolbar>
                
                <p:dialog header="Thông báo" widgetVar="viewDialog" width="250" showEffect="explode" hideEffect="explode">
                    <p:dataList id="viewMsgs" value="#{facesContext.messageList}" var="msg" itemType="disc">  
                        <h:outputText value="#{msg.summary}"/>
                    </p:dataList>
                </p:dialog>

                <p:dialog header="Thông báo" widgetVar="editDialog" width="250" showEffect="explode" hideEffect="explode">  
                    <p:dataList id="editMsgs" value="#{facesContext.messageList}" var="msg" itemType="disc">  
                        <h:outputText value="#{msg.summary}"/>
                    </p:dataList>
                </p:dialog>
                
                <p:dialog header="Thông báo" widgetVar="deleteDialog" width="250" showEffect="explode" hideEffect="explode">  
                    <p:dataList id="deleteMsgs" value="#{facesContext.messageList}" var="msg" itemType="disc">  
                        <h:outputText value="#{msg.summary}"/>
                    </p:dataList>
                </p:dialog>
                
                <p:dialog header="Thông báo" widgetVar="selectHotDialog" width="250" showEffect="explode" hideEffect="explode">  
                    <p:dataList id="selectHotMsgs" value="#{facesContext.messageList}" var="msg" itemType="disc">  
                        <h:outputText value="#{msg.summary}"/>
                    </p:dataList>
                </p:dialog>
                
                <p:confirmDialog message="Bạn có muốn xoá danh mục này?" appendToBody="true"
                                 header="Thông báo" severity="alert" widgetVar="deleteConfirm">  
                    <p:commandButton value="Có" oncomplete="deleteConfirm.hide()" update="mainForm"
                                     actionListener="#{categoryBean.deleteAction()}" />  
                    <p:commandButton value="Không" onclick="deleteConfirm.hide()" type="button" />                     
                </p:confirmDialog>
                
                <script type="text/javascript">
                   function handleViewRequest(xhr, status, args) {
                       if(args.validationFailed || args.invalid) {
                           viewDialog.show();
                           jQuery('#dialog').effect("shake", { times:3 }, 100);  
                       } 
                   } 
                   function handleEditRequest(xhr, status, args) {
                       if(args.validationFailed || args.invalid) {
                           editDialog.show();
                           jQuery('#dialog').effect("shake", { times:3 }, 100);  
                       } 
                   }
                   function handleDeleteRequest(xhr, status, args) {
                       if(args.validationFailed || args.invalid) {
                           deleteDialog.show();
                           jQuery('#dialog').effect("shake", { times:3 }, 100);  
                       } else {
                           deleteConfirm.show();
                       }
                   }
                   function handleSelectHotRequest(xhr, status, args) {
                       if(args.validationFailed || args.invalid) {
                           selectHotDialog.show();
                           jQuery('#dialog').effect("shake", { times:3 }, 100);  
                       } 
                   }
                </script>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>
